﻿<template>
  <info-card title="商品分类" ref="cardRef">
    <el-form ref="classificationFormRef" :model="classificationForm" :rules="formRule" label-width="auto">
      <el-form-item label="近期使用" v-if="recentList.length">
        <div class="recent-list">
          <div class="recent-list-item" v-for="(item, index) in recentList" :key="index" @click="checkCategory(item)">
            {{ item.nameList.join("/") }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="选择类目" prop="category">
        <el-cascader
          v-model="classificationForm.category"
          ref="cascaderRef"
          :options="categoryList"
          :style="{ width: '350px' }"
          placeholder="请选择类目"
          @change="getClassData"
        />
      </el-form-item>
    </el-form>
  </info-card>
</template>

<script setup>
  import infoCard from "./InfoCard.vue";
  // 根据类目选择的可选择属性
  const classAttrList = inject("classAttrList");
  // 详情
  const detail = inject("detail");
  // 卡片Ref
  const cardRef = ref();
  // 表单Ref
  const classificationFormRef = ref();
  // 表单
  const classificationForm = ref({ category: "" });
  // 类目数据
  const categoryList = ref([]);
  // 近期使用
  const recentList = ref([]);
  // 表单规则
  const formRule = reactive({
    category: [{ required: true, message: "请选择类目", trigger: "blur" }],
  });
  watch(detail, val => {
    // 设置选择类目
    if (val.firstCategoryId) {
      const { firstCategoryId, secondCategoryId, brandId, modelId } = val;
      const defaultIds = [];
      if (firstCategoryId) {
        defaultIds.push(firstCategoryId);
        if (secondCategoryId) {
          defaultIds.push(secondCategoryId);
          if (brandId) {
            defaultIds.push(brandId);
            if (modelId) {
              defaultIds.push(modelId);
            }
          }
        }
      }
      classificationForm.value.category = defaultIds;
    }
  });
  // 类目Ref
  const cascaderRef = ref();
  onMounted(() => {
    loadRecentlyCategory();
    loadCategroryData();
  });
  // 获取近期使用类目
  const loadRecentlyCategory = () => {
    Api.product.getRecentlyCategory().then(res => {
      recentList.value = res.data.map(item => {
        const ids = [];
        const nameList = [];
        if (item.firstCategoryId) {
          nameList.push(item.firstCategoryName);
          ids.push(item.firstCategoryId);
          if (item.secondCategoryId) {
            nameList.push(item.secondCategoryName);
            ids.push(item.secondCategoryId);
            if (item.brandId) {
              nameList.push(item.brandName);
              ids.push(item.brandId);
              if (item.modelId) {
                nameList.push(item.modelName);
                ids.push(item.modelId);
              }
            }
          }
        }
        return { ...item, ids, nameList };
      });
    });
  };
  // 获取类目数据
  const loadCategroryData = () => {
    Api.product.getProductClassification().then(res => {
      categoryList.value = res.data;
    });
  };
  // 获取当前选择类目下的商品属性
  const getClassData = () => {
    Api.product
      .getClassAttr({ id: classificationForm.value.category[classificationForm.value.category.length - 1] })
      .then(res => {
        classAttrList.value = res.data?.attributes || [];
      });
  };
  // 选择最近类目
  const checkCategory = info => {
    classificationForm.value.category = info.ids;
  };
  // 表单验证
  const formVerify = () => {
    return classificationFormRef.value.validate();
  };
  const getTop = () => {
    return cardRef.value.getTop();
  };
  // 暴露方法
  defineExpose({
    formVerify,
    getTop,
    classificationForm,
  });
</script>

<style lang="scss" scoped>
  .recent-list {
    display: flex;
    flex-wrap: wrap;
    .recent-list-item {
      padding: 0 12px;
      background-color: var(--fl1);
      border-radius: 4px;
      color: var(--ct2);
      font-size: 14px;
      margin-right: 8px;
      cursor: pointer;
    }
  }
</style>
